<template>
  <div>
    <div class="imageText">
      <Carddetail v-for="(item, index) in data" :item="item" :key="index">
      </Carddetail>
    </div>
    <div class="Bar">
      <div class="leftbar">
        <Barone></Barone>
      </div>
      <div class="rightbar">
        <Bartow></Bartow>
      </div>
    </div>
      <div class="pie">
        <Pie :color="color1" :data="dataone" :title="'今日订单状态占比'"></Pie>
        <Pie :color="color2" :data="datatow" :title="'今日支付方式对比'"></Pie>
        <Pie :color="color3" :data="datathree" :title="'今日热门出发到达城市'"></Pie>
      </div>
  </div>
</template>

<script setup lang="ts">
import Carddetail from "@/components/Carddetail.vue";
import Barone from "@/components/echarts/Barone.vue";
import Bartow from "@/components/echarts/Bartow.vue";
import Pie    from "@/components/echarts/Pie.vue"
import { ref } from "vue";
const data = ref([
  {
    num: "120",
    flag: true,
    src: "../assets/Icons/png/今日已售(元).png",
    numcolor: "#3bc9a9",
    UpDownColor: "#3bc9a9",
    daytext: "今日已售(元)",
    upordown: true,
  },
  {
    num: "208",
    flag: false,
    src: "../assets/Icons/png/今日订票数.png",
    numcolor: "#679cf6",
    UpDownColor: "#3bc9a9",
    daytext: "今日订票数",
    upordown: true,
  },
  {
    num: "328",
    flag: false,
    src: "../assets/Icons/png/今日支付订单数.png",
    numcolor: "#ff8d41",
    UpDownColor: "#3bc9a9",
    daytext: "今日支付订单数",
    upordown: true,
  },
  {
    num: "50",
    flag: false,
    src: "../assets/Icons/png/今日退票数.png",
    numcolor: "#de799b",
    UpDownColor: "#e02020",
    daytext: "今日退票数",
    upordown: false,
  },
]);
const dataone = ref([
      { value: 1000, name: "已付款" },
      { value: 950, name: "代付款" },
      { value: 50, name: "已取消" }
    ]);
    const datatow = ref([
      { value: 1100, name: "支付" },
      { value: 900, name: "微信" },
      { value: 50, name: "其他" }
    ]);
    const datathree = ref([
      { value: 30, name: "三亚 " },
      { value: 20, name: "深圳 " },
      { value: 18, name: "北京 " },
      { value: 14, name: "上海 " },
      { value: 10, name: "武汉 " },
      { value: 10, name: "香港 " },
      { value: 8, name: "澳门 " },
      { value: 7, name: "成都 " },
      { value: 7, name: "桂林 " },
      { value: 6, name: "哈尔滨" }
    ]);
    const color1 = ref(['#1ba9ba','#ff8d41','#b2b7c6'])
    const color2 = ref(['#679cf6','#169f5e','#b2b7c6'])
    const color3 = ref(['#de799b','#ff8d41','#FFC700','#84d36e','#237a11',
                        '#1ba9ba','#2BD3FA','#559EFD','#505EE0','#b2b7c6'
    ])
</script>

<style scoped>
.imageText {
  margin: 10px 0;
  width: 100%;
  height: 130px;
  overflow: hidden;
}
.Bar {
  width: 100%;
  height: 352px;
  margin-bottom: 10px;
  clear: both;
}
.Bar div {
  float: left;
  margin-left: 10px;
}
.leftbar {
  width: 550px;
  height: 352px;
  background-color: #ffffff;
  box-shadow: 0px 0px 10px 0px rgba(51, 51, 51, 0.1);
  border-radius: 8px;
}
.rightbar {
  width: 420px;
  height: 350px;
  background-color: #ffffff;
  box-shadow: 0px 0px 10px 0px rgba(51, 51, 51, 0.1);
  border-radius: 8px;
}
.pie {
  width: 980px;
  height: 227px;
  background-color: #ffffff;
  box-shadow: 0px 0px 10px 0px rgba(51, 51, 51, 0.1);
  border-radius: 8px;
  margin-left: 10px;
  display: flex;
  justify-content: space-between;
}
</style>
